<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'>
    <!--
      所谓的属性透传就是你不需要接收父组件传递的属性，可以直接被加载在组件的根标签中，
      如果有多个根标签的时候，我们可以使用 v-bind='$attrs' 来指明将属性加到哪个标签中
      如果有多个属性都会被加在指定元素上，事件也可以透传
     -->
    <cell class="cell" style="color: red" title="你好世界" @click="btnClick"></cell>
  </div>
</body>
<script>
  const app = Vue.createApp({
    data () {
      return {

      }
    },
    methods: {
      btnClick () {
        console.log('被点击了');
      }
    },
  })

  // app.component('cell', {
  //   props: ['class'],
  //   template: `
  //   <h1 :='$attrs'>抬杠就是你对，辩解就是我错</h1>
  //   <h6 v-bind='$attrs' style='font-size: 20px' >小弟</h6>
  //   `
  // })

  app.component('cell', {
    inheritAttrs: true, // 标记是否透传
    props: ['class'],
    template: `
      <h1>抬杠就是你对，辩解就是我错</h1>
    `
  })
  app.mount('#app')
</script>

</html>
